<template>
  	<div id='overview' class="overview">
    	<el-row>
			<!-- 数据统计 -->
      		<el-col :span="5">
        		<p :style="{background: '#2B313E',color: '#7D7F8D','font-size': '20px','line-height': '32px','font-weight': '700','padding-left': '1.5em',}">数据统计</p>
        		<ul>
          			<li v-for="(item,index) in items1" :key="index" class="overview1">
            			<span style="float: left;padding-left: 30px;">{{ item.title }}</span>
            			<span style="float: right;padding-right: 30px;color: #379BDB;">{{ item.content }}</span>
          			</li>
        		</ul>
				<!-- 今日事件统计 -->
				<div id="eventHanding" :style="{width: '100%', height: '320px', background: '#2B313E', margin: '20px 0', position: 'relative'}"></div>
			</el-col>
			<!-- 地图 -->
			<el-col :span="14" :style="{padding: '0 20px', height: '660px'}">
				<div id="map" :style="{height: 'inherit'}"></div>
			</el-col>
			<el-col :span="5" :style="{position: 'relative'}">
				<!-- 告警统计 -->
				<div id="alarmStatistics" :style="{width: '100%', height: '320px', background: '#2B313E'}"></div>

				<!-- 水质统计 -->
				<p :style="{background: '#2B313E',color: '#7D7F8D','font-size': '20px','line-height': '48px','font-weight': '700','padding-left': '1.5em','margin-top': '20px'}">水质统计</p>
				<el-table id="qualityStatistics" :data="tableData" style="width: 100%;height: 612px;position: absolute;background: #2B313E;color: #EFEFEF;" :header-cell-style="{background: '#343C4E', color: '#EFEFEF'}">
      				<el-table-column prop="riverName" label="河道名称" :style="{width: '25%'}"></el-table-column>
      				<el-table-column prop="riverLevel" label="河道等级" align="center" :style="{width: '25%'}"></el-table-column>
      				<el-table-column prop="masterName" label="河长" align="center" :style="{width: '25%'}"></el-table-column>
					<el-table-column prop="qualityLevel" label="水质等级" align="center" :style="{width: '25%'}"></el-table-column>
    			</el-table>

				<!-- 天气预报 -->
				<!-- <div id="weather">
					<div id="today_container">
						<div>
							<img src="" alt="今日天气"/>
						</div>
						<div>
							<div class="main_info"><span class="info">城市</span>|<span class="info">201X-XX-XX</span>|<span class="info">星期X</span>|<span class="info">---</span> </div>
							<div class="more_info">今日温度：<span class="info">-----</span>风力：<span class="info">-----</span>风向：<span class="info">-----</span>PM2.5：<span class="info">--</span></div>
							<div class="more_info">紫外线强度：<span class="info">---</span>洗车指数：<span class="info">---</span>感冒指数：<span class="info">---</span>穿衣指数：<span class="info">---</span></div>
						</div>
					</div>
					<div id="future_container">
						<div class="future_box">
							<img src="" alt="天气"/>
							<span class="future_info">201X-XX-XX</span>
							<span class="future_info">星期X</span>
							<span class="future_info">--</span><span class="future_info">12-16℃</span>
						</div>
						<div class="future_box">
							<img src="" alt="天气"/>
							<span class="future_info">201X-XX-XX</span>
							<span class="future_info">星期X</span>
							<span class="future_info">--</span><span class="future_info">12-16℃</span>
						</div>
						<div class="future_box">
							<img src="" alt="天气"/>
							<span class="future_info">201X-XX-XX</span>
							<span class="future_info">星期X</span>
							<span class="future_info">--</span><span class="future_info">12-16℃</span>
						</div>
						<div class="future_box">
							<img src="" alt="天气"/>
							<span class="future_info">201X-XX-XX</span>
							<span class="future_info">星期X</span>
							<span class="future_info">--</span><span class="future_info">12-16℃</span>
						</div>
						<div class="future_box">
							<img src="" alt="天气"/>
							<span class="future_info">201X-XX-XX</span>
							<span class="future_info">星期X</span>
							<span class="future_info">-</span><span class="future_info">12-16℃</span>
						</div>
					</div>
				</div> -->
			</el-col>
    	</el-row>
		<el-row>
			<el-col :span="8">
				<!-- 今日事件统计 -->
				<div id="eventStatistics" :style="{width: '100%', height: '320px', background: '#2B313E'}"></div>
			</el-col>
			<el-col :span="11" :style="{padding: '0 20px'}">
				<!-- 巡河统计 -->
				<div id="patrolStatistics" :style="{width: '100%', height: '320px', background: '#2B313E'}"></div>
			</el-col>
		</el-row>
  	</div>
</template>
<script>
import axios from 'axios'

export default {
	name: 'overview'
  	,data(){
		return {
			items1: [
				{title: '单位名称', content: '河长办公室'},
				{title: '所属区域', content: '重庆市'},
				{title: '河道', content: '218条'},
				{title: '总长', content: '391公里'},
				{title: '河长', content: '302位'},
				{title: '取水口数量', content: '987个'},
				{title: '排污口数量', content: '987个'},
				{title: '今日巡河', content: '98条'},
				{title: '今日事件', content: '9条'}
			]
			,
			tableData: [{
				riverName: '嘉陵江',
				riverLevel: '区级',
				masterName: '张三',
				qualityLevel: '优'
			}, {
				riverName: '涪江',
				riverLevel: '区级',
				masterName: '李四',
				qualityLevel: '优'
			}, {
				riverName: '渠江',
				riverLevel: '区级',
				masterName: '王五',
				qualityLevel: '差'
			}, {
				riverName: '涪江大石段',
				riverLevel: '镇级',
				masterName: '张三',
				qualityLevel: '中'
			}]
		}
  	},
  	mounted(){
    	// axios.get('/api/rcs/home/homeInfo').then((res)=>{
      	// 	console.log(res)
		// }).catch();
		// axios.post('/api/rcs/home/homeInfo').then((res)=>{
		// 	console.log('xx', res);
		// })
		this.showEchart1();
		this.showEchart2();
		this.showEchart3();
		this.showEchart4();
		let mapObj = new AMap.Map('map', {
			resizeEnable: true,
			zoom: 14,
			center: [106.553773, 29.491451]
		});
		let _this = this;
		let marker = new AMap.Marker({
			map: _this.mapObj,
         	position: new AMap.LngLat(106.553773, 29.491451)
    	});
		// window.getCity = this.getCity;
		// this.jsonp('https://api.map.baidu.com/api?v=2.0&ak=Dv1NMU23dh1sGS9n2tUouDEYY96Dfzh3&s=1&callback=getCity');
	}
	, methods: {
		showEchart1() {
			let elem = document.getElementById('alarmStatistics');
			let myChart = this.echarts.init(elem);
			myChart.setOption({
				title: {
					text: '告警统计',
					x: '30',
					y: '5%',
					textStyle:{
						fontSize: 20,
						color: '#cee0f3'
					}
				},
				tooltip: {},
				grid : {
                    x : '15%',
                    y : '25%',
                    x2 : '5%',
                    y2 : '15%',
                    borderWidth:1
                },
				yAxis: {
					name: '数量',
					splitLine: {
						show: false
					},
					axisLine:{
						lineStyle:{
							color:'#797979'
						}
					}
				},
				xAxis: {
					data: ["水质告警","雨量告警","水位告警","视频告警"],
					axisLine:{
						lineStyle:{
							color:'#797979'
						}
					},
					axisLabel: {
						interval:0,
						rotate:40
					}
				},
				series: [{
					type: 'bar',
					data: [20, 30, 25, 35],
					barWidth: 20,
					itemStyle:{
						normal:{
							color:'#FF0000'
						}
					},

				}]
			});

		}
		,
		showEchart2() {
			let elem = document.getElementById('eventHanding');
			let myChart = this.echarts.init(elem);
			let option = {
				title : {
					text: 100+100+100,
					x: 'center',
					y: '44%',
					textStyle:{
						fontSize: 16,
						color: '#cee0f3'
					},
					subtext: '事件总数',
					subtextStyle:{
						color: '#cee0f3',
					},
				},
				color: ['#0085D0', '#8FC31F', '#EF4E4F'],
				legend: {
					orient : 'horizontal',
					x : 'center',
					y : '90%',
					data:[
						{name: '已解决', icon: 'rect'},
						{name: '解决中', icon: 'rect'},
						{name: '待解决', icon: 'rect'}
					],
					itemWidth: 12,
					itemHeight: 12,
					textStyle:{
						fontSize: 12,
						color: '#cee0f3'
					},
				},
				tooltip : {
					trigger: 'item',
					formatter: "{a} <br/>{b} : {c} ({d}%)"
				},
				series : [
					{
						name:'今日事件处置',
						type:'pie',
						radius : ['30%', '50%'],
						hoverAnimation: false,
						itemStyle : {
							normal : {
								label : {
									show : true
								},
								labelLine : {
									show : true
								}
							}
						},
						labelLine: {
							normal: {
								length: 20,
								length2: 35,
								lineStyle: {
									color: '#cee0f3'
								}
							}
						},
						label: {
							normal: {
								// \n\n可让文字居于牵引线上方，很关键
								// {b}  代表显示的内容标题
								// {c}代表数据
								// formatter: '{d}% \n\n {b}：{c} \n\n',
								formatter: '{d}% \n\n {b} \n',
								borderWidth: 20,
								borderRadius: 4,
								padding: [0, -35, -10],
								textStyle: {
									color: '#cee0f3',
								},
								rich: {
									a: {
										color: '#383F50',
										fontSize: 12,
										lineHeight: 20
									},
									b: {
										fontSize: 12,
										lineHeight: 20,
										color: '#cee0f3'
									}
								}
							}
						},
						data:[
							{value:100, name:'已解决'},
							{value:100, name:'解决中'},
							{value:100, name:'待解决'},
						]
					}
				]
			};
			myChart.setOption(option);

			var element = document.createElement('span');
			element.innerText = '今日事件处置';
			element.style = "color: #cee0f3; position: absolute; top: 5%; left: 32px;font-size: 20px;font-weight: 700;";
			elem.appendChild(element);
		}
		,
		showEchart3() {
			let elem = document.getElementById('eventStatistics');
			let myChart = this.echarts.init(elem);
			let option = {
				title : {
					text: '今日事件统计',
					x: '30',
					y: '5%',
					textStyle:{
						fontSize: 20,
						color: '#cee0f3'
					}
				},
				color: ['#0085D0', '#8FC31F', '#EF4E4F'],
				legend: {
					type: 'scroll',
					orient : 'horizontal',
					x : 'center',
					y : '90%',
					data:[
						{name: '侵占河道', icon: 'rect'},
						{name: '非法采砂', icon: 'rect'},
						{name: '超标排污', icon: 'rect'},
						{name: '电毒炸鱼', icon: 'rect'},
						{name: '破坏航道', icon: 'rect'},
						{name: '侵占河道1', icon: 'rect'},
						{name: '非法采砂1', icon: 'rect'},
						{name: '超标排污1', icon: 'rect'},
						{name: '电毒炸鱼1', icon: 'rect'},
						{name: '破坏航道1', icon: 'rect'},
						{name: '侵占河道2', icon: 'rect'},
						{name: '非法采砂2', icon: 'rect'}
					],
					itemWidth: 12,
					itemHeight: 12,
					textStyle:{
						fontSize: 12,
						color: '#cee0f3'
					},
					tooltip: {
						formatter: function(params) {
							var res = '';
							var myseries = option.series;
							for (var i in myseries) {
								for(var j = 0; j < myseries[i].data.length; j++){
									if(myseries[i].data[j].name === params.name){
										res += myseries[i].data[j].value + '<br/>' + params.name;
									}
								}
							}
							return res;
						},
						show: true
					},
				},
				tooltip : {
					trigger: 'item',
					formatter: "{c}<br/>{b}",
					position: function() {
						let x = (arguments[4].viewSize[0] - arguments[4].contentSize[0])/2;
						let y = (arguments[4].viewSize[1] - arguments[4].contentSize[1])/2;
						return [x, y];
					},
					extraCssText:'text-align: center; background: transparent;'
				},
				series : [
					{
						name:'',
						type:'pie',
						radius : ['40%', '60%'],
						hoverAnimation: true,
						itemStyle : {
							normal : {
								label : {
									show : false
								},
								labelLine : {
									show : false
								},
								borderWidth: 1,
        						borderColor: '#fff'
							}
						},
						data:[
							{value:100, name:'侵占河道'},
							{value:100, name:'非法采砂'},
							{value:100, name:'超标排污'},
							{value:100, name:'电毒炸鱼'},
							{value:100, name:'破坏航道'},
							{value:100, name:'侵占河道1'},
							{value:100, name:'非法采砂1'},
							{value:100, name:'超标排污1'},
							{value:100, name:'电毒炸鱼1'},
							{value:100, name:'破坏航道1'},
							{value:100, name:'侵占河道2'},
							{value:100, name:'非法采砂2'}
						]
					}
				]
			};
			myChart.setOption(option);
		}
		,
		showEchart4() {
			let elem = document.getElementById('patrolStatistics');
			let myChart = this.echarts.init(elem);
			let option = {
				title : {
					text: '巡河统计',
					x: '30',
					y: '5%',
					textStyle:{
						fontSize: 20,
						color: '#cee0f3'
					}
				},
				grid : {
                    x : '10%',
                    y : '25%',
                    x2 : '10%',
                    y2 : '10%',
                    borderWidth:1
                },
				color: ['#FF0000', '#33FF33', '#CC6666'],
				tooltip : {
					trigger: 'axis',
					axisPointer: {
                    	type: 'none'
                	}
				},
				legend: {
					orient : 'vertical',
					x : 'right',
					y : '5%',
					data:['县级河长', '镇级河长', '村级河长'],
					textStyle: {
						color: '#cee0f3',
						fontSize: 12
					},
					itemWidth: 12,
					itemHeight: 12
				},
				calculable : true,
				xAxis : {
					type : 'category',
					data : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
					axisLine:{
						lineStyle:{
							color:'#797979'
						}
					}
				}
				,
				yAxis: {
					name: '次数',
					type : 'value',
					splitLine: {
						show: false
					},
					axisLine:{
						lineStyle:{
							color:'#797979'
						}
					}
				},
				series : [
					{
						name:'县级河长',
						type:'bar',
						data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]
					},
					{
						name:'镇级河长',
						type:'bar',
						data:[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
					},
					{
						name:'村级河长',
						type:'bar',
						data:[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
					}
				]
			};
			myChart.setOption(option);
		}
		,
		// // 获取天气 数据
		// jsonp(url) {
		// 	var script = document.createElement('script');
		// 	script.src = url;
		// 	document.body.insertBefore(script, document.body.firstChild);
		// 	document.body.removeChild(script);
		// }
		// ,
		// getCity() {
		// 	let that = this;
		// 	function city(result) {
		// 		//去掉城市名后的"市"
		// 		var city = result.name.substring(0, result.name.length - 1);

		// 		//请求当前城市的天气数据
		// 		that.jsonp(that.createUrl(city)[0]);
		// 		that.jsonp(that.createUrl(city)[1]);
		// 	}
		// 	var cityName = new BMap.LocalCity();
		// 	console.log('getCity', city);
		// 	cityName.get(city);
		// }
		// ,
		// createUrl() {
		// 	var cityName = '';
		// 	if (arguments.length == 0) {
		// 		cityName = document.getElementById('text').value;
		// 	} else {
		// 		cityName = arguments[0];
		// 	}

		// 	console.log(cityName);

		// 	var urls = [];
		// 	var getWeather = this.getWeather;
		// 	var getTodayWeather = this.getTodayWeather;
		// 	debugger
		// 	console.log('createUrl', getWeather);
		// 	urls[0] = 'https://sapi.k780.com/?app=weather.future&appkey=10003&sign=b59bc3ef6191eb9f747dd4e83c99f2a4&format=json&jsoncallback=getWeather&weaid=' + encodeURI(cityName);
		// 	urls[1] = 'https://api.map.baidu.com/telematics/v3/weather?output=json&ak=FK9mkfdQsloEngodbFl4FeY3&callback=getTodayWeather&location=' + encodeURI(cityName);
		// 	return urls;
		// }
		// ,
		// getWeather(response) {
		// 	var oSpan = document.getElementsByClassName('info');
		// 	var data = response.result;
		// 	oSpan[0].innerHTML = data[0].citynm;
		// 	oSpan[1].innerHTML = data[0].days;
		// 	oSpan[2].innerHTML = data[0].week;
		// 	oSpan[3].innerHTML = data[0].weather;
		// 	oSpan[4].innerHTML = data[0].temperature;
		// 	oSpan[5].innerHTML = data[0].winp;
		// 	oSpan[6].innerHTML = data[0].wind;

		// 	var aDiv = document.getElementsByClassName('future_box');
		// 	for (var i = 0; i < aDiv.length; i++) {
		// 		var aSpan = aDiv[i].getElementsByClassName('future_info');
		// 		aSpan[0].innerHTML = data[i + 1].days;
		// 		aSpan[1].innerHTML = data[i + 1].week;
		// 		aSpan[2].innerHTML = data[i + 1].weather;
		// 		aSpan[3].innerHTML = data[i + 1].temperature;
		// 	}
		// 	//根据返回数据，替换不同天气图片
		// 	// changeImg(response);
		// }
		// ,
		// getTodayWeather(response) {
		// 	console.log('getTodayWeather', response);
		// 	var oSpan = document.getElementsByClassName('info');
		// 	var data = response.results;
		// 	oSpan[7].innerHTML = data[0].pm25;
		// 	oSpan[8].innerHTML = data[0].index[4].zs;
		// 	oSpan[9].innerHTML = data[0].index[1].zs;
		// 	oSpan[10].innerHTML = data[0].index[2].zs;
		// 	oSpan[11].innerHTML = data[0].index[0].zs;
		// }
		// ,
		// changeImg(data) {
		// 	var firstImg = document.getElementsByTagName("img")[0];
		// 	var firstWeatherId = data.result[0].weatid;
		// 	this.chooseImg(firstWeatherId, firstImg);

		// 	var aImg = document.getElementById('future_container').getElementsByTagName('img');
		// 	for (var j = 0; j < aImg.length; j++) {
		// 		var weatherId = data.result[j + 1].weatid;
		// 		this.chooseImg(weatherId, aImg[j]);
		// 	}
		// }
		// ,
		// chooseImg(id, index) {
		// 	switch (id) {
		// 		case '1':
		// 			index.src = 'images/weather_icon/1.png';
		// 			break;
		// 		case '2':
		// 			index.src = 'images/weather_icon/2.png';
		// 			break;
		// 		case '3':
		// 			index.src = 'images/weather_icon/3.png';
		// 			break;
		// 		case '4':
		// 		case '5':
		// 		case '6':
		// 		case '8':
		// 		case '9':
		// 		case '10':
		// 		case '11':
		// 		case '12':
		// 		case '13':
		// 		case '20':
		// 		case '22':
		// 		case '23':
		// 		case '24':
		// 		case '25':
		// 		case '26':
		// 			index.src = 'images/weather_icon/4.png';
		// 			break;
		// 		case '7':
		// 			index.src = 'images/weather_icon/6.png';
		// 			break;
		// 		case '14':
		// 		case '15':
		// 		case '16':
		// 		case '17':
		// 		case '18':
		// 		case '27':
		// 		case '28':
		// 		case '29':
		// 			index.src = 'images/weather_icon/5.png';
		// 			break;
		// 		case '19':
		// 		case '21':
		// 		case '30':
		// 		case '31':
		// 		case '32':
		// 		case '33':
		// 			index.src = 'images/weather_icon/7.png';
		// 			break;
		// 		default:
		// 			index.src = 'images/weather_icon/8.png';
		// 	}
		// }
	}
}
</script>
<style>
	html {
		overflow: hidden !important;
	}
	.el-table::before {
		height: 0 !important;
	}
	.el-table tbody tr:nth-of-type(even) {
		background: #343C4E;
	}
	.el-table tbody tr:nth-of-type(odd) {
		background: #2B313E;
	}
	.el-table--enable-row-hover .el-table__body tr:hover>td{
		background-color: #212e3e !important;
	}
	.amap-logo {
		display: none !important;
	}
</style>
<style scoped>
	.overview1 {
		height: 32px;
		line-height: 32px;
		background: #343C4E;
	}
	.overview1:nth-of-type(even) {
		background: #2B313E;
	}
</style>